<template>
    <div class="cart-main">
      <ShopCart
        :column="column"
        :top-css="{
          background: '#f5f8fe',
          height: '.2969rem',
        }"
        ref="shopCartRef"
        :showSel="false"
        :factory-data="saveOrderData"
        :platformCustomer="[
          {
            customer_id: 1,
            customer_name: '平台客服一',
            customer_phone: '17325764719',
          },
          {
            customer_id: 2,
            customer_name: '平台客服二',
            customer_phone: '13580871559',
            qrcode: '/images/qrcode.png',
          },
          {
            customer_id: 3,
            customer_name: '平台客服三',
            customer_phone: '12567871443',
            qrcode: '/images/qrcode.png',
          },
        ]"
        multiple
      >
        <template #subtotal="{ row }">
          {{ row.total * row.price }}
        </template>
        <template #goods="{ row }">
          <div class="goods">
            <div class="goods-img"><img v-lazy="publicUrl(row.img)" /></div>
  
            <div class="goods-right">
              <div class="title overTwo">{{ row.goods_name }}</div>
              <div class="bottom">单号:{{ row.order_no }}</div>
            </div>
          </div>
        </template>
  
        <template #total="{ row }">
          <div class="counter">
            <Counter
              :step="1"
              :min="1"
              :max="row.purchase"
              v-model:value="row.total"
            />
            <div class="errorMsg" v-show="row.purchase !== undefined">
              限购{{ row.purchase }}件
            </div>
          </div>
        </template>
        <template #operation="{ row, itemKey, orderType, orderItemKey }">
          <div class="operation">
            <div class="edit thumb">加入购物车</div>

            <div class="edit thumb">单品提交</div>

            <router-link
              :to="`/mtm/index/make`"
              class="edit thumb"
              v-show="orderType === 'diy'"
              >编辑</router-link
            >
            <Popconfirm
              :placement="'bottom'"
              :title="`确定要删除吗`"
              :loading="row.deleteLoading"
              @confirm="
                (close) => delOrder(itemKey, orderType, orderItemKey, row, close)
              "
            >
              <span class="delText">删除</span>
            </Popconfirm>
          </div>
        </template>
      </ShopCart>
  
     
  
      <div class="bottom-cart">
        <div class="left">
          <div class="checkbox" @click="() => shopCartRef?.changeCheckAll()">
            <img
              v-show="shopCartRef?.isCheckAll"
              :src="publicUrl(`/images/checkbox.png`)"
            />
          </div>
          <div class="all">全选</div>
          <div class="text" @click="deleteGoods">删除</div>
          <div class="text" @click="moveIn">移入收藏夹</div>
        </div>
       
      </div>
    </div>
    <Confirm
      :title="`确定要删除这些商品?`"
      v-model:show="showConfirm"
      @confirm="() => shopCartRef?.batchDelOrder()"
    >
    </Confirm>
  </template>
  <script setup lang="ts" name="">
  import { ref, computed } from "vue";
  import ShopCart, {
    Column,
    Factory,
    OrderShow,
    CartChecked,
  } from "@/components/ShopCart";
  import Counter from "@/components/Counter/index.vue";
  import saveOrderJson from "@/json/saveOrder.json";
  import Popconfirm from "@/components/Popconfirm/index.vue";
  import { toast } from "vue3-toastify";
  import { publicUrl, twoFixed, copyObj } from "@/utils/util";
  
  import Select from "@/components/Select/index.vue";
  import { useRouter } from "vue-router";
  import Confirm from "@/components/Confirm/index.vue";
  
  interface Coupon {
    coupon_id: number;
    coupon_name: string;
    coupon_discount: number;
  }
  
  const saveOrderData = ref<Array<Factory<OrderShow>>>(saveOrderJson);
  const shopCartRef = ref<InstanceType<typeof ShopCart>>();
  const couponValue = ref<number | undefined>(undefined);
  const router = useRouter();
  const showConfirm = ref<boolean>(false);
  
  const cartData = computed((): CartChecked => {
    let cartCheckeds = shopCartRef.value?.cartChecked;
    if (!cartCheckeds)    //
      return {
        goods_num: 0, //所选的商品数量
        totalPrice: 0, //所选的商品总价钱
        discount: 0, //优惠的价格
        lastPrice: 0, //最后的价格
      };  
  
    let cartChecked = copyObj(cartCheckeds);
    /* 平台优惠券*/
    let coupon = platformCoupon.value.find(
      (item: Coupon) => couponValue.value === item.coupon_id
    );
  
    if (coupon) {
      cartChecked.discount += coupon.coupon_discount;
      cartChecked.lastPrice -= coupon.coupon_discount;
    }
    /* */
  
    cartChecked.lastPrice = cartChecked.lastPrice > 0 ? cartChecked.lastPrice : 0;
  
    return cartChecked;
  });
  const platformCoupon = ref<Array<Coupon>>([
    {
      coupon_id: 1,
      coupon_name: "优惠300",
      coupon_discount: 300,
    },
    {
      coupon_id: 2,
      coupon_name: "优惠500",
      coupon_discount: 500,
    },
  ]);
  
  const column = ref<Array<Column>>([
    {
      title: "品类信息",
      slotName: "goods",
      width: 500,
    },
    {
      title: "面料信息/规格",
      dataKey: "spec",
      tdAlign: "center",
      width: 150,
    },
    {
      title: "单价",
      dataKey: "price",
      tdAlign: "center",
  
      width: 150,
    },
    {
      title: "数量",
      dataKey: "total",
      slotName: "total",
      tdAlign: "center",
      width: 150,
    },
    {
      title: "小计",
      tdAlign: "center",
      slotName: "subtotal",
      width: 150,
    },
    {
      title: "操作",
      tdAlign: "center",
      slotName: "operation",
      width: 180,
    },
  ]);
  
  const delOrder = (
    itemKey: number,
    orderType: "diy" | "spot" | "fabric",
    orderItemKey: number,
    row: OrderShow,
    close: any
  ) => {
    // if (shopCartData.value[itemKey].order[orderType]) {
    row.deleteLoading = true;
    setTimeout(() => {
      toast.success(`删除成功`);
      close();
      shopCartRef.value?.delOrder(itemKey, orderType, orderItemKey);
      let bool = shopCartRef.value?.checkFactoryHaveOrder(itemKey);
      bool
        ? shopCartRef.value?.resetFactory(itemKey)
        : shopCartRef.value?.delFactory(itemKey); //有单的情况下重置工厂勾选情况 没有则删除工厂
    }, 2000);
    // }
  };
  
  const deleteGoods = () => {
    let checkedArr = shopCartRef.value?.getOrderChecked();
    if (!checkedArr || checkedArr.length == 0) {
      toast.warning(`请选择要删除的商品`);
      return;
    } else {
      // shopCartRef.value?.batchDelOrder(checkedArr);
      showConfirm.value = true;
    }
  };
  
  const moveIn = () => {
    let checkedArr = shopCartRef.value?.getOrderChecked();
    if (!checkedArr || checkedArr.length == 0) {
      toast.warning(`请选择要移入的订单商品`);
      return;
    } else {
      toast.success(`移入成功`);
    }
  };
  
  const settlement = () => {
    let checkedArr = shopCartRef.value?.getOrderChecked();
    if (!checkedArr || checkedArr.length == 0) {
      toast.warning(`还未选择结算的商品`);
      return;
    } else {
      router.push(`/order/index`);
    }
  };
  </script>
  <style scoped lang="scss">
  @media screen and (min-width: $pc-min-width) {
    @import "./pc.scss";
  }
  </style>
  